<template>
	<div class="flex justify-center">
		<div class="w-60%">
			<p class="font-bold text-24px text-#000000 mb-20px flex justify-center">输入金额</p>

			<p class="text-#86909C text-14px mb-20px">收款人</p>
			<div class="flex items-center p-20px bg-#F1F5FF rounded-8px">
				<img src="/more/avatar.jpeg" alt="" class="w-30px h-30px rounded-4px">
				<div class="ml-10px">
					<p class="text-14px mb-6px">ID: 2547459</p>
					<p class="text-12px text-#C9CDD4">昵称：夏天</p>
				</div>
			</div>

			<p class="text-#86909C text-14px mb-10px mt-30px">币种</p>
			<div class="flex items-center pl-20px pr-20px pt-4px pb-4px border-1px border-solid border-#E5E6EB rounded-8px box-border h-50px">
				<img :src="selectPayCoin.icon" alt="" class="mr-10px">
				<el-select v-model="selectPayCoin.coin" placeholder="选择币种" placement="bottom-end" suffix-icon="CaretBottom"
					size="large" style="width: 95%" popper-class="more-transfer-select-popper" @change="changePayCoin">
					<el-option v-for="item in payCoinList" :key="item.coin" :label="item.coin" :value="item.coin">
						<div>
							<div>
								<img :src="item.icon" alt="">
								<span class="text-dark-700">
									{{ item.coin }}
								</span>
							</div>
							<el-icon v-if="item.coin === selectPayCoin.coin" color="rgb(17,76,238)"><Select /></el-icon>
						</div>
					</el-option>
				</el-select>
			</div>

			<p class="text-#86909C text-14px mb-10px mt-30px">数量</p>
			<div class="flex items-center pl-20px pr-20px pt-4px pb-4px border-1px border-solid border-#E5E6EB rounded-8px  box-border h-50px">
				<el-input placeholder="输入数量">
				</el-input>
				<p class="text-#20232A">USDT</p>
			</div>


			<p class="text-#86909C text-14px mb-10px mt-30px">转账附言（选填）</p>
			<div class="flex items-center pl-20px pr-20px pt-4px pb-4px border-1px border-solid border-#E5E6EB rounded-8px  box-border h-50px">
				<el-input placeholder="输入数量">
				</el-input>
				<p class="text-#20232A">0/50</p>
			</div>

			<div class="mt-60px flex items-center justify-between">
				<el-button type="primary" color="#ECECF0" style="width: 48%;height: 50px;font-size: 18px;" @click="back">
					上一步
				</el-button>
				<el-button type="primary" color="#114CEE" style="width: 48%;height: 50px;font-size: 18px;" @click="next">
					继续
				</el-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
const emits = defineEmits(['next','back'])


function next() {
	emits('next')
}

function back() {
	emits('back')
}
// 交易货币
const selectPayCoin = ref<any>({
	icon: '/transaction/c2c/quick/CNY.svg',
	coin: 'CNY'
})
const payCoinList = ref<any[]>([
	{
		icon: '/transaction/c2c/quick/CNY.svg',
		coin: 'CNY'
	},
	{
		icon: '/transaction/c2c/quick/VND.svg',
		coin: 'VND'
	}
])
// 选择交易货币
function changePayCoin(val: string) {
	payCoinList.value.forEach((item: any) => {
		if (item.coin === val) {
			selectPayCoin.value.icon = item.icon;
			selectPayCoin.value.coin = item.coin;
		}
	});
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
	height: 30px;
	border:none;
	padding: 0;
	box-shadow:none;
}
::v-deep .el-select__wrapper{
	padding: 0;
	box-shadow:none !important;
}
</style>
<style lang="scss">
.more-transfer-select-popper{
	padding: 0 !important;
	ul{
		padding: 0;
		li{
			padding: 10px 20px;;
			height: 50px;
			>div{
				display: flex;
				align-items: center;
				justify-content: space-between;
				>div{
					display: flex;
					align-items: center;
					>span{
						margin-left: 10px;
					}
				}
				>img{
					width: 20px;
					height: 20px;
				}
			}
		}
	}
	.el-popper__arrow{
		display:none;
	}
}
</style>
